<template>
    <div class="drag-verify">
        <div class="range" :class="verifyResult ? 'success' : ''">
            <div class="block" @mousedown.stop="onStart" @touchstart.stop="onStart">
                <i> {{ props.antcodeV ? "√" : ">>" }}</i>
            </div>
            <span class="text">
                {{ props.antcodeV ? successText : startText }}
            </span>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const emit = defineEmits(['update'])
const props = defineProps({
    antcodeV: {
        type: Boolean,
        defalut: false
    },
    // 成功图标
    successIcon: {
        type: String,
        default: 'iconfont icon-status-nor'
    },
    // 成功文字
    successText: {
        type: String,
        default: '验证成功'
    },
    // 开始的图标
    startIcon: {
        type: String,
        default: 'iconfont icon-login-slid'
    },
    // 开始的文字
    startText: {
        type: String,
        default: '拖动滑块到最右边'
    },
})
const verifyResult = ref(props.antcodeV) // 验证结果
const isTouch = 'ontouchstart' in document.documentElement
const moveEvent = isTouch ? 'touchmove' : 'mousemove'
const upEvent = isTouch ? 'touchend' : 'mouseup'

// 滑块触摸开始
const onStart = (ev) => {
    let disX = 40 // 滑块移动距离
    const ele = document.querySelector('.drag-verify .block')
    const startX =
        (ev).clientX || (ev).touches[0].pageX
    const parentWidth = ele.offsetWidth
    const MaxX = parentWidth
    // 滑块触摸移动
    const onMove = (e) => {
        const endX =
            (e).clientX || (e).touches[0].pageX
        disX = endX - startX
        if (disX <= 0) {
            disX = 0
        }
        if (disX >= MaxX) {
            disX = MaxX
        }
        ele.style.transition = '.1s all'
        ele.style.transform = `translateX(${disX}px)`
    }

    // 滑块触摸结束
    const onEnd = () => {

        if (disX !== MaxX) {
            ele.style.transition = '.5s all'
            ele.style.transform = 'translateX(0)'
        } else {
            // 执行成功
            verifyResult.value = true
            emit('update', verifyResult.value)
            ele.style.transition = '.5s all'
            ele.style.transform = 'translateX(0)'
        }
        document.removeEventListener(moveEvent, onMove)
        document.removeEventListener(upEvent, onEnd)
    }
    document.addEventListener(moveEvent, onMove)
    document.addEventListener(upEvent, onEnd)
}
</script>
<style lang="scss" scoped>
@import "@/assets/base.scss";

.drag-verify {
    width: 100%;
    height: 40px;
    margin: 10px 0;

    .range {
        width: 100%;
        height: 40px;
        background-color: #ececee;
        position: relative;
        border-radius: 4px;
        transition: 1s all;
        user-select: none;
        color: #666;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;

        .text {
            // position: relative;
            font-size: $title-font-size7 ;
            z-index: 1;
            color: #fff;
        }

        // height: 40px;
        &.success {
            background-color: #03c5e5;
            color: #fff;

            .text {
                position: relative;
                z-index: 9;
                // color: #000;
            }

            .block i {
                color: #838cfc;
            }
        }

        .block {
            display: block;
            position: absolute;
            // left: calc(-100% + 80px);
            width: 100%;
            height: 40px;
            background: #838cfc;
            border-radius: 4px;
            overflow: hidden;

            i {
                position: absolute;
                left: 0;
                width: 40px;
                height: 100%;
                font-size: $title-font-size4;
                color: #c8c9cc;
                background-color: #fff;
                border: 0.1vw solid #e5e5e5;
                border-radius: 4px;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 2;
            }
        }
    }
}
</style>
